<template>
	<div class="boxes-ai-form">
		<vue-scroll @handle-scroll="handleScroll">
			<a-form ref="serviceFormRef" :model="serviceForm" layout="vertical">
				<a-form-item
					name="aiSrvAlarmName"
					class="hide-required"
					:rules="[{ required: true, message: '请输入告警名称', trigger: 'change' }]"
				>
					<template #label>
						<span>告警名称</span>
					</template>
					<a-input v-model:value.trim="serviceForm.aiSrvAlarmName" :maxlength="20" placeholder="请输入" style="width: 320px"></a-input>
				</a-form-item>

				<a-form-item
					class="hide-required form-item"
					name="aiSrvDelayTriggerSeconds"
					:rules="[{ required: true, message: '请输入异常报警温度', trigger: 'change' }]"
				>
					<template #label>
						<span>异常报警温度</span>
						<a-tooltip placement="top" title="持续检测到且超过设置温度，则产生告警">
							<global-svg-icon icon-name="information-line" style="margin-left: 3px"></global-svg-icon>
						</a-tooltip>
					</template>
					<!-- -20 ~ 150 -->
					<a-input-number
						id="inputNumber"
						v-model:value="serviceForm.aiSrvDelayTriggerSeconds"
						:min="-20"
						:max="150"
						:precision="0"
						style="width: 104px"
					></a-input-number>
					&nbsp;℃
				</a-form-item>

				<a-form-item
					name="aiSrvTriggerInterval"
					class="hide-required form-item"
					:rules="[{ required: true, message: '请输入触发间隔', trigger: 'change' }]"
				>
					<template #label>
						<span>触发间隔</span>
						<a-tooltip placement="top" title="产生报警后再次产生报警的时间间隔">
							<global-svg-icon icon-name="information-line" style="margin-left: 3px"></global-svg-icon>
						</a-tooltip>
					</template>
					<a-input-number
						id="inputNumber"
						v-model:value="serviceForm.aiSrvTriggerInterval"
						:min="serviceForm?.intervalMin"
						:max="serviceForm?.intervalMax"
						:precision="0"
					></a-input-number>

					&nbsp;秒
				</a-form-item>

				<a-form-item class="hide-required form-item" name="avAlarmStatus">
					<template #label>
						<span>声光报警器</span>
						<a-tooltip placement="top" title="外接声光报警器，并语音提示：温度异常">
							<global-svg-icon icon-name="information-line" style="margin-left: 3px"></global-svg-icon>
						</a-tooltip>
					</template>
					<a-radio-group v-model:value="serviceForm.avAlarmStatus">
						<a-radio :value="0">关闭</a-radio>
						<a-radio :value="1">开启</a-radio>
					</a-radio-group>
				</a-form-item>
			</a-form>
		</vue-scroll>
	</div>
</template>

<script setup lang="ts" name="BoxesAITempForm">
import { FormInstance } from 'ant-design-vue';
import { g6DeepClone } from 'glasssix-utils-ts';
import { handleCascaderData } from '../../../../utils';

const props = defineProps({
	loading: { type: Boolean, default: false },
	bAiServerId: { type: Number, default: null }
});

const styleValue = reactive({
	'--header-height': '76px',
	'--main-height': '0px',
	'--border-bottom': '1px solid transparent'
});
const handleScroll = (vertical: Record<string, any>): void => {
	styleValue['--border-bottom'] = vertical.scrollTop > 5 ? '1px solid rgba(211, 211, 211, 0.2)' : '1px solid transparent';
};

// /**
//  * 表单
//  */
interface ServiceForm {
	id?: number | undefined;
	aiSrvAlarmName: string | undefined;
	aiSrvDelayTriggerSeconds: number;
	aiSrvTriggerInterval: number | string;
	avAlarmStatus: number | string;

	intervalMin?: number | undefined;
	intervalMax?: number | undefined;
}
const serviceFormRef = ref<FormInstance>();
const serviceForm = ref<ServiceForm>({
	aiSrvAlarmName: '',
	aiSrvDelayTriggerSeconds: 100,
	aiSrvTriggerInterval: '',
	avAlarmStatus: '',
	aiSrvAlgorithmSensitivity: 1
});

/**
 * 设置表单数据
 */
const oldFormData = reactive<ServiceForm>({} as ServiceForm); //老数据 用于部分值保留

const setFormData = (data: any): void => {
	// serviceForm.value = data;
	serviceForm.value = handleCascaderData(data);
	Object.assign(oldFormData, g6DeepClone(data));
	serviceForm.value.aiSrvAlgorithmSensitivity = 1;
	serviceForm.value.aiSrvDefaultConfig = {};

	serviceForm.value.delayMax = 1;
	serviceForm.value.delayMin = 1;
	serviceForm.value.intervalMax = 1;
	serviceForm.value.intervalMin = 1;
};

/**
 * 获取表单数据
 */
const getFormData = async () => {
	try {
		await serviceFormRef.value?.validate();
		console.log('getFormData', JSON.parse(JSON.stringify(serviceForm.value)));

		return Promise.resolve(serviceForm.value);
	} catch (error) {
		return Promise.reject(error);
	}
};

/**
 * 同步获取表单数据
 */
const getFormDataSync = (): any => {
	return serviceForm.value;
};

defineExpose({
	getFormDataSync,
	setFormData,
	getFormData
});
</script>

<style lang="less" scoped>
// 弹窗
.boxes-ai-form {
	overflow-y: scroll;

	.ant-slider-rail {
		background: #171820;
	}

	.ant-slider-track {
		background: @secondary04;
	}

	.form-item {
		margin-top: 32px;
		color: @text03;
	}

	.ant-modal-footer {
		position: absolute;
	}

	.ant-form-item-control-input-content {
		color: @text02;
	}

	.ant-input-number {
		border: 1px solid @mask02;
		border-radius: 6px;
		background: transparent !important;
	}

	.form-item-slider {
		display: flex;
		align-items: center;

		:deep(.ant-slider) {
			width: 231px;
			margin-right: 15px;
			margin-left: 10px;

			.ant-slider-rail {
				background: @borderColor01 !important;
			}

			.ant-slider-track {
				background: linear-gradient(90deg, #e4ecff 0%, #185eff 100%) !important;
			}
		}
	}

	.iconfont {
		margin-left: 8px;
		color: @text04;
	}
}

.center {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.color-box {
	width: 10px;
	height: 10px;
	border-radius: 50%;
}
</style>
